<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style1.css" />
    <style>
        /*
            选择器分组：
                选择器1，选择器2{ 属性名称:属性的值; }
        */
        /*
             优先级
                1.按照选择器搜索精确度来编写:
                    行内样式 > ID选择器 > 类选择器  > 元素选择器
                 2.就近原则
        */

        .first{
            color: green;
        }


        .second{
            color: blue;
        }

        /*就近原则*/
    </style>
    <style>
        /*
            元素选择器{
			    属性名称:属性的值;
			    属性名称2: 属性的值2;
			}
        */
        p{
            color: cornflowerblue;
            font-size: 18px;
        }

        /*
            ID选择器
            以#开头
            ID最好是唯一的
			 #ID的名称{
				  属性名称:属性的值;
				  属性名称:属性的值;
				}
		*/
        #divid{
            color: red;
        }

        /*
        后代选择器
           h1 em 中间以空格隔开的是后代选择器，找到所有的后代
           h1 > em 中间是>的为子元素选择器，只有一个
        */
        h1 em{
            color: red;
        }

        /*
            类选择器
            以 .开头
            .类的名称{
			   属性名称:属性的值;
			  	属性名称:属性的值;
			}
		*/
        .shuiguo{
            color: yellow;
        }
        .shucai{
            color: green;
        }

        /*
        属性选择器,多种方式
            a[title]{color: red;}
            a[title='aaa']{color: red;}
            a[href][title]{color: red;}
            a[href][title='aaa']{color: red;}
        */
        a[href][title]{
            color: yellow;
        }

        /*伪类选择器  通常使用在a 标签上*/
        a:link {color: red}		/* 未访问的链接 */
        a:visited {color: #00FF00}	/* 已访问的链接 */
        a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
        a:active {color: #0000FF}	/* 选定的链接 */
    </style>
</head>
<body>
    <!--快标签-->
    <!--就近原则，哪个离这里近-->
    <span class="second first">就近原则为蓝色</span>

    <!--通过行内样式修改甘蔗-->
    <div class="six" style="color: #ac2925">甘蔗</div>
    <!--
        通过外部样式修改苹果
        <link rel="stylesheet" href="style1.css" />
    -->
     <div class="five">苹果</div>

    <!--元素选择器-->
     <p>this is a xuan ze qi</p>
    <p>this is a xuan ze qi</p>

    <!--ID选择器,请将JAVAEE颜色改成红色-->
    <div id="divid">Hello World</div>
    <div>IOS</div>
    <div>ANDROID</div>

    <!--后代选择器,请将H1下面的所有 em 元素 的内容颜色改成 红色-->
    <h1>
        This is a<em>儿子</em>
        <strong>
             <em>孙子</em>
        </strong>heading
    </h1>

    <!--类选择器
                请将水果类,改成黄色
                蔬菜类改成绿色
            -->
    <div class="shuiguo">香蕉</div>
    <div class="shuiguo">苹果</div>
    <div class="shuiguo">橘子</div>
    <div class="shucai">白菜</div>
    <div class="shucai">茄子</div>

    <!--属性选择器
            修改包含title属性的a标签-->
    <a href="#" title="aaa">张三</a>
    <!--伪类选择器-->
    <a href="#" >李四</a>


</body>
</html>